<script setup lang="ts">
import { reactive, ref, onBeforeUnmount } from 'vue'
import { bus } from '@/utils/mitt'
import { userInfoAPI } from '@/http/userInfo/index'
import { editorAdminAPI } from '@/http/admin'
import { ElMessage } from 'element-plus'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const editorAdminDialog = ref()
const editorAdminFormRef = ref()
const title = ref()
const emit = defineEmits(['adminList'])
const editorAdminForm = reactive({
  id: 0,
  account: '',
  name: '',
  sex: '',
  email: '',
  department: '',
  identity: '',
});
(bus as any).on('editId', async (id: number) => {
  const res = await userInfoAPI(id)
  editorAdminForm.id = res[0].id
  editorAdminForm.account = res[0].account
  editorAdminForm.name = res[0].name
  editorAdminForm.sex = res[0].sex
  editorAdminForm.email = res[0].email
  editorAdminForm.department = res[0].department
  editorAdminForm.identity = res[0].identity
})
bus.on('titleId', (titleId) => {
  if (titleId == 1) {
    title.value = '编辑产品管理员'
  } else if (titleId == 2) {
    title.value = '编辑用户管理员'
  } else if (titleId == 3) {
    title.value = '编辑消息管理员'
  }
})
const rules = reactive({
  account: [
    { required: true, message: '请输入管理员的注册账号', trigger: 'blur' },
    { min: 6, max: 12, message: '账号长度在6-12位之间', trigger: 'change' },
  ],
  name: [{ required: true, message: '请输入管理员的姓名', trigger: 'blur' }],
  sex: [{ required: true, message: '请输入管理员的性别', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入管理员的邮箱', trigger: 'blur' },
    { min: 6, max: 18, message: '邮箱长度在6-18位之间', trigger: 'change' },
  ],
  department: [
    { required: true, message: '请输入管理员的部门', trigger: 'blur' },
  ],
  identity: [{ required: true, message: '赋予身份', trigger: 'blur' }],
})
const open = () => {
  editorAdminDialog.value = true
}
const onSubmitEditorAdminForm = async () => {
  if (userStore.identity == '用户') return ElMessage.error('您无权进行修改！')
  await editorAdminFormRef.value.validate()
  const res = await editorAdminAPI(editorAdminForm)
  if (res.status == 0) {
    ElMessage({
      type: res.status == 0 ? 'success' : 'error',
      message: res.status == 0 ? `${res.message}` : '编辑失败！',
    })
    emit('adminList')
    editorAdminDialog.value = false
  }
}
defineExpose({
  open,
})
onBeforeUnmount(() => {
  bus.all.clear()
})
</script>

<template>
  <el-dialog v-model="editorAdminDialog" :title="title" width="500">
    <el-form
      :model="editorAdminForm"
      label-width="auto"
      style="max-width: 600px"
      :rules="rules"
      ref="editorAdminFormRef"
      :disabled="userStore.identity == '用户' ? true : false"
    >
      <el-form-item label="账号" prop="account">
        <el-input
          v-model="editorAdminForm.account"
          placeholder="输入您的账号"
          disabled
        />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="editorAdminForm.name" placeholder="输入您的姓名" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="editorAdminForm.sex" placeholder="输入您的性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editorAdminForm.email" placeholder="输入您的邮箱" />
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-select
          v-model="editorAdminForm.department"
          placeholder="输入您的部门"
        >
          <el-option label="总裁办" value="总裁办" />
          <el-option label="项目部" value="项目部" />
          <el-option label="销售部" value="销售部" />
          <el-option label="组织部" value="组织部" />
          <el-option label="项目组" value="项目组" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份" prop="identity">
        <el-select v-model="editorAdminForm.identity" placeholder="赋予身份">
          <el-option label="用户" value="用户"></el-option>
          <el-option label="产品管理员" value="产品管理员"></el-option>
          <el-option label="消息管理员" value="消息管理员"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editorAdminDialog = false">取消</el-button>
        <el-button type="primary" @click="onSubmitEditorAdminForm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
